'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { Mentor } from '@/types';
import { mentors } from '@/lib/api';

interface MentorSelectorProps {
  selectedMentor: Mentor | null;
  onMentorSelect: (mentor: Mentor) => void;
}

export default function MentorSelector({ selectedMentor, onMentorSelect }: MentorSelectorProps) {
  const [showQuote, setShowQuote] = useState<string | null>(null);

  const handleMentorClick = (mentor: Mentor) => {
    onMentorSelect(mentor);
    setShowQuote(mentor.quote);
    setTimeout(() => setShowQuote(null), 2000);
  };

  return (
    <div className="w-full max-w-4xl mx-auto mb-8">
      <h2 className="text-2xl md:text-3xl font-bold text-center mb-8 text-white pop-text">
        选择你的鼓励师 ✨
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {mentors.map((mentor, index) => (
          <motion.div
            key={mentor.id}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.2, duration: 0.5 }}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => handleMentorClick(mentor)}
            className={`anime-card p-6 cursor-pointer relative ${
              selectedMentor?.id === mentor.id ? 'ring-4 ring-purple-400' : ''
            }`}
          >
            <div className="text-center">
              <div className={`mentor-avatar w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center ${
                selectedMentor?.id === mentor.id ? 'selected' : ''
              }`}>
                <div className="text-4xl">
                  {mentor.id === 'sheldon' && '🧠'}
                  {mentor.id === 'confucius' && '👴'}
                  {mentor.id === 'guo' && '🎭'}
                </div>
              </div>

              <h3 className="text-xl font-bold text-white mb-2">{mentor.name}</h3>

              {showQuote === mentor.quote && (
                <motion.div
                  initial={{ scale: 0, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  exit={{ scale: 0, opacity: 0 }}
                  className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-yellow-400 text-black px-4 py-2 rounded-full text-sm font-bold z-10 whitespace-nowrap"
                >
                  {mentor.quote}
                  <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-t-8 border-t-yellow-400"></div>
                </motion.div>
              )}

              <div className="mt-4">
                <div className="w-full bg-purple-600 rounded-full h-2">
                  <div
                    className={`h-2 rounded-full transition-all duration-500 ${
                      selectedMentor?.id === mentor.id
                        ? 'bg-gradient-to-r from-pink-500 to-yellow-500 w-full'
                        : 'bg-gray-400 w-0'
                    }`}
                  ></div>
                </div>
              </div>
            </div>
          </motion.div>
        ))}
      </div>

      {selectedMentor && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          className="mt-8 text-center"
        >
          <div className="inline-block bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-3 rounded-full">
            <span className="text-lg font-bold">
              已选择：{selectedMentor.name}
              <span className="ml-2 animate-bounce">⭐</span>
            </span>
          </div>
        </motion.div>
      )}
    </div>
  );
}